<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
			html,
			body {
				margin: 0px;
				background-color: #FFFFFF;
			}

			#mainContain {
				width: 80%;
				margin: 5px auto;
			}

			.rowstyle1 {
				width: 50%;
				margin: 3px auto;
			}

			.rowstyle1 ul {
				list-style: none;
			}

			.rowstyle1 ul li a{
				display: block;
				width: 90px;
				text-align: center;
				background-color: #C9D7E5;
			}
			.rowstyle1>ul>li>a{
				border-right: red solid 1px;				
			}
			/* 剔除最后一条竖线 */
			.rowstyle1>ul>li:last-child>a {
				border-right: red 1px;
			}
			
			ul li{
				width: 91px;				
			}
			.rowstyle1>ul>li {
				float: left;
				/* 相对定位，这样子元素相对于父元素进行相对定位 */
				/* position: relative; */
			}


			.rowstyle1 ul a {
				display: block;
				text-decoration: none;
				/* margin: 1px 10px; */
			}

			/* .rowstyle1>ul>li:hover {
				background-color: #BCD68D;

			} */

			.subNav ul {
				width: 91px;
				/* 隐藏下拉菜单 */
				height: 0px;
				overflow: hidden;
				
				opacity: 0.1;
				transition: height 1s;
				-webkit-transition: height 1s;
				position: relative;
				left: -45%;
			}

			.subNav:hover ul {
				height: 120px;
				opacity: 1;
				/* position: relative;
				left: -45%; */
			}
			
		</style>
	</head>
	<body>
		<div id="mainContain">
			<div class="rowstyle1">
				<ul>
					<li><a href="#">首页</a></li>
					<li class="subNav">
						<a href="#">用户管理</a>
						<ul>
							<li><a href="#">用户添加</a></li>
							<li><a href="#">用户修改</a></li>
							<li><a href="#">用户新增</a></li>
						</ul>
					</li>
					<li><a href="#">购物车</a></li>
					<li><a href="#">订单</a></li>
					<li id="lastli"><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>
